<!--
 * @Author: C.
 * @Date: 2023-02-24 10:12:21
-->
<template>
  <div>
    <div class="voucher">
      <div class="voucher-header">
        <span class="voucher-header-title"> 记账凭证 </span>
        <div class="voucher-header-form" v-if="false">
          <BasicForm @register="register" />
        </div>
      </div>
      <ClickOutSide @click-outside="handleClickOutside">
        <table class="voucher-table">
          <!-- 表头 -->
          <tr>
            <td class="t-head">摘要</td>
            <td class="t-head">会计科目</td>
            <td class="t-head">
              <div class="t-amount-title">借方金额</div>
              <div class="t-amount-unit">
                <div>亿</div>
                <div>千</div>
                <div>百</div>
                <div>十</div>
                <div>万</div>
                <div>千</div>
                <div>百</div>
                <div>十</div>
                <div>元</div>
                <div>角</div>
                <div>分</div>
              </div>
            </td>
            <td class="t-head">
              <div class="t-amount-title">贷方金额</div>
              <div class="t-amount-unit">
                <div>亿</div>
                <div>千</div>
                <div>百</div>
                <div>十</div>
                <div>万</div>
                <div>千</div>
                <div>百</div>
                <div>十</div>
                <div>元</div>
                <div>角</div>
                <div>分</div>
              </div>
            </td>
          </tr>
          <tbody class="t-body">
            <tr v-for="(item, level) in List" :key="item">
              <td>
                <!--{{item.main}}-->
                <div class="t-cell" @click="cellFoucs(item.summary, level)">
                  <input
                    class="text-area"
                    v-model="item.summary.value"
                    v-focus
                    @blur="cellBlur(item, 'summary')"
                    v-if="item.summary.inputShow"
                  />
                  <span v-else>{{ item.summary.display }}</span>
                </div>
                <div class="operation">
                  <div class="operation-btn">
                    <minus-circle-outlined class="operation-icon-del" @click="delRow(level)" />
                    <plus-circle-outlined class="operation-icon-add" @click="addNewRow(level)" />
                  </div>
                </div>
              </td>
              <td
                ><div class="t-cell" @click="cellFoucs(item.ledger, level)">
                  <input
                    class="text-area"
                    v-model="item.ledger.value"
                    @blur="cellBlur(item, 'ledger')"
                    v-focus
                    v-if="item.ledger.inputShow"
                  />
                  <span v-else>{{ item.ledger.display }}</span>
                </div></td
              >
              <td>
                <div class="t-cell" @click="cellFoucs(item.debit, level)">
                  <input
                    v-model="item.debit.value"
                    @blur="cellBlur(item, 'debit')"
                    v-focus
                    v-if="item.debit.inputShow"
                    class="text-area"
                    type="number"
                  />
                  <div class="t-amount-unit" v-else>
                    <div v-for="(num, index) in item.debit.display" :key="index">{{ num }} </div>
                  </div>
                </div>
              </td>
              <td>
                <div class="t-cell" @click="cellFoucs(item.creditor, level)">
                  <input
                    v-model="item.creditor.value"
                    @blur="cellBlur(item, 'creditor')"
                    v-focus
                    v-if="item.creditor.inputShow"
                    class="text-area"
                    type="number"
                  />
                  <div class="t-amount-unit" v-else>
                    <div v-for="(num, index) in item.creditor.display" :key="index">{{ num }} </div>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
          <tfoot class="t-footer">
            <tr>
              <td colspan="2">
                <div class="t-cell t-cell-total">
                  <span>合计：{{ total }}</span>
                </div>
              </td>
              <td
                ><div class="t-cell">
                  <div class="t-amount-unit">
                    <div v-for="(num, index) in leftAmount" :key="index">{{ num }} </div>
                  </div>
                </div></td
              >
              <td
                ><div class="t-cell">
                  <div class="t-amount-unit">
                    <div v-for="(num, index) in rightAmount" :key="index">{{ num }} </div>
                  </div>
                </div></td
              >
            </tr>
          </tfoot>
        </table>
      </ClickOutSide>
      <div class="voucher-footer">
        <span class="voucher-footer-title"> 制单人：管理员 </span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, Directive, unref } from 'vue';
  import { creatNewRow } from './help';
  import { ClickOutSide } from '/@/components/ClickOutSide';
  import { PlusCircleOutlined, MinusCircleOutlined } from '@ant-design/icons-vue';
  import { useSummary, usekeyboard } from './hooks';
  import { formSchemas } from './schema';
  import { BasicForm, useForm } from '/@/components/Form/index';
  let List = ref<any>([]);
  for (let i = 0; i <= 4; i++) {
    List.value.push(creatNewRow());
  }
  const [register] = useForm({
    // labelWidth: 120,
    schemas: formSchemas,
    showActionButtonGroup: false,
    rowProps: {
      gutter: 20,
    },
    baseColProps: {},
  });
  const { leftAmount, rightAmount, total } = useSummary({ List });
  const { handleClickOutside, cellFoucs, cellBlur } = usekeyboard({ List });
  const vFocus: Directive = {
    // 聚焦元素
    mounted(el) {
      el.focus();
      el.select();
    },
  };
  function addNewRow(index) {
    // console.log(List.value);
    unref(List).splice(index + 1, 0, creatNewRow());
  }
  function delRow(index) {
    if (unref(List).length <= 1) return;
    // console.log(List.value);
    unref(List).splice(index, 1);
  }
</script>
<style lang="less" scoped>
  @theme-color: rgb(187, 101, 39);

  .voucher {
    margin: 50px auto;
    width: 1100px;
    min-height: 300px;
    background-color: #fff;
    padding: 20px 0 50px 0;
    color: @theme-color;

    .voucher-header {
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;

      &-title {
        text-align: center;
        border-bottom: 3px solid @theme-color;
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 10px;
        width: 100px;
      }

      &-form {
        width: 100%;
        padding: 0 60px;
      }
    }

    .voucher-footer {
      padding: 0 60px;
      font-size: 17px;
      font-weight: bold;
      margin-top: 5px;
    }

    .voucher-table {
      width: 980px;
      margin: 0 60px;
      // border: 1px solid #000;
      td {
        border: 1px solid @theme-color;
        text-align: center;
        table-layout: fixed;
        padding: 0;
      }

      tr:nth-child(even) {
        background: #fff2e4;
      }

      .t-head {
        height: 52px;
        // width: 110px;
        width: 25%;
        font-weight: bold;

        .t-amount-title {
          height: 32px;
          line-height: 35px;
        }

        .t-amount-unit {
          margin: 0;
          padding: 0;
          height: 20px;
          line-height: 17px;
          border-top: 1px solid @theme-color;
          // display: inline;
          display: grid;
          grid-template-columns: repeat(11, 1fr);

          div:nth-child(3) {
            border-right-color: rgba(74, 144, 226);
          }

          div:nth-child(6) {
            border-right-color: rgba(74, 144, 226);
          }

          div:nth-child(9) {
            border-right-color: rgba(226, 106, 74);
          }

          div {
            // width: 20px;
            border-right: 1px solid @theme-color;
            padding: 0;
            margin: 0;

            &:last-child {
              border-right: none;
            }
          }
        }
      }

      .t-body {
        height: 60px;

        tr:hover {
          background-color: #fff2e4;

          .operation-btn {
            display: block;
          }
        }

        td {
          position: relative;

          .operation {
            position: absolute;
            left: -60px;
            top: 0px;
            width: 60px;
            height: 60px;

            &:hover {
              .operation-btn {
                display: block;
              }
            }
          }

          .operation-btn {
            font-size: 20px;
            display: none;
            padding-left: 20px;
            padding-top: 5px;

            .operation-icon-del {
              color: red;
              display: block;
            }

            .operation-icon-add {
              margin-top: 7px;
              color: green;
              display: block;
            }
          }
        }

        .text-area {
          width: 100%;
          height: 60px;
          padding: 9px 14px 9px 10px;
          overflow: auto;
          resize: none;
          border: none;
          border-radius: 0px;
          margin: 0;
          box-sizing: border-box;

          &:focus {
            // border-style: solid;
            // border-color: #03a9f4;
            border: 1px solid #03a9f4;
            box-shadow: 0 0 10px #03a9f4;
            outline: 0;
          }
        }
      }

      .t-cell {
        height: 60px;
        text-align: left;
        line-height: 60px;
        color: #000;
        cursor: pointer;

        span {
          padding-left: 10px;
        }

        .t-amount-unit {
          margin: 0;
          padding: 0;
          height: 60px;
          line-height: 60px;
          // border-top: 1px solid #000;
          // display: inline;
          display: grid;
          grid-template-columns: repeat(11, 1fr);
          text-align: center;

          div:nth-child(3) {
            border-right-color: rgba(74, 144, 226);
          }

          div:nth-child(6) {
            border-right-color: rgba(74, 144, 226);
          }

          div:nth-child(9) {
            border-right-color: rgba(226, 106, 74);
          }

          div {
            // width: 20px;
            border-right: 1px solid @theme-color;
            font-weight: bold;

            &:last-child {
              border-right: none;
            }
          }
        }
      }

      .t-footer {
        .t-amount-unit,
        .t-cell-total {
          color: @theme-color;
        }

        .t-cell-total {
          font-size: 17px;
          font-weight: bold;
        }
      }
    }
  }
</style>
